@scrider/formatter 1.3.3 → 1.3.5

package/README.md

@@ -77,6 +77,23 @@ deltaToHtml(delta, { registry })           // Delta → HTML string
 htmlToDelta(html, { registry })            // HTML string → Delta
 ```
 
+**Simple Table presentation (v1.3.4+)** — inline borders/shades for clipboard and Office paste (Delta structure unchanged):
+
+```typescript
+import { deltaToHtml, type TablePresentation } from '@scrider/formatter';
+
+const tablePresentation: TablePresentation = {
+  grid: true,
+  borderColor: '#e7e7e7',
+  headerBold: true,
+  headerCenter: true,
+};
+
+deltaToHtml(delta, { tablePresentation });
+```
+
+See scrider-editor `docs/simple-tables.md` §8 for the full contract (`grid` / `line`, `headerShade`, `zebraRows`, `defaultCellAlign`, …).
+
 ### Markdown Conversion
 
 ```typescript

package/dist/index.cjs

@@ -61,6 +61,7 @@ __export(index_exports, {
   deltaToHtml: () => deltaToHtml,
   deltaToMarkdown: () => deltaToMarkdown,
   dividerFormat: () => dividerFormat,
+  documentPresentationStyleParts: () => documentPresentationStyleParts,
   escapeHtml: () => escapeHtml,
   extractBoxOpAttributes: () => extractBoxOpAttributes,
   extractTableRegion: () => extractTableRegion,
@@ -82,6 +83,7 @@ __export(index_exports, {
   isTextNode: () => isTextNode,
   isValidColor: () => isValidColor,
   isValidHexColor: () => isValidHexColor,
+  isZebraBodyRow: () => isZebraBodyRow,
   italicFormat: () => italicFormat,
   kbdFormat: () => kbdFormat,
   linkFormat: () => linkFormat,
@@ -92,6 +94,8 @@ __export(index_exports, {
   nodeAdapter: () => nodeAdapter,
   normalizeDelta: () => normalizeDelta,
   preloadRemark: () => preloadRemark,
+  resolveDocumentPresentation: () => resolveDocumentPresentation,
+  resolveTablePresentation: () => resolveTablePresentation,
   sanitizeDelta: () => sanitizeDelta,
   sizeFormat: () => sizeFormat,
   slugify: () => slugify,
@@ -2599,6 +2603,94 @@ function slugifyWithDedup(text, usedSlugs) {
   return `${base}-${count}`;
 }
 
+// src/conversion/html/document-presentation.ts
+function resolveDocumentPresentation(presentation) {
+  if (!presentation) return void 0;
+  const lineSpacing = typeof presentation.lineSpacing === "number" && presentation.lineSpacing > 0 ? presentation.lineSpacing : void 0;
+  const textIndentCm = typeof presentation.textIndentCm === "number" && presentation.textIndentCm > 0 ? presentation.textIndentCm : void 0;
+  if (lineSpacing === void 0 && textIndentCm === void 0) return void 0;
+  return { lineSpacing, textIndentCm };
+}
+var LINE_HEIGHT_TAGS = /* @__PURE__ */ new Set(["p", "li", "blockquote"]);
+function documentPresentationStyleParts(tag, resolved) {
+  if (!resolved) return [];
+  const parts = [];
+  if (resolved.lineSpacing !== void 0 && LINE_HEIGHT_TAGS.has(tag)) {
+    const pct = Math.round(resolved.lineSpacing * 100);
+    parts.push(`line-height:${resolved.lineSpacing}`);
+    parts.push(`mso-line-height-alt:${pct}%`);
+  }
+  if (resolved.textIndentCm !== void 0 && tag === "p") {
+    parts.push(`text-indent:${resolved.textIndentCm}cm`);
+  }
+  return parts;
+}
+function joinStyleParts(parts) {
+  return parts.length > 0 ? ` style="${parts.join("; ")}"` : "";
+}
+
+// src/conversion/html/table-presentation.ts
+var DEFAULT_BORDER_COLOR = "#e7e7e7";
+var DEFAULT_HEADER_BG = "#f5f5f5";
+var DEFAULT_ZEBRA_BG = "#fafafa";
+var CELL_PADDING = "6px 13px";
+function resolveTablePresentation(presentation) {
+  return {
+    grid: presentation?.grid === true,
+    line: presentation?.line === true && presentation?.grid !== true,
+    borderColor: presentation?.borderColor ?? DEFAULT_BORDER_COLOR,
+    headerShade: presentation?.headerShade === true,
+    zebraRows: presentation?.zebraRows === true,
+    headerBold: presentation?.headerBold === true,
+    headerCenter: presentation?.headerCenter === true,
+    defaultCellAlign: presentation?.defaultCellAlign ?? "left"
+  };
+}
+function isZebraBodyRow(headerRowCount, bodyRowIndex) {
+  return (headerRowCount + bodyRowIndex + 1) % 2 === 0;
+}
+function isTableCellAlign(value) {
+  return value === "left" || value === "center" || value === "right";
+}
+function tableOpenTag(presentation) {
+  if (!presentation.grid && !presentation.line) {
+    return "<table>";
+  }
+  return `<table style="border-collapse: collapse">`;
+}
+function buildTableCellStyleAttr(params) {
+  const { presentation, cellTag, colAlign, headerRowCount, bodyRowIndex } = params;
+  const parts = [];
+  parts.push(`padding: ${CELL_PADDING}`);
+  const color = presentation.borderColor;
+  if (presentation.grid) {
+    parts.push(`border: 1px solid ${color}`);
+  } else if (presentation.line) {
+    const width = cellTag === "th" ? "1px" : "0.5px";
+    parts.push(`border-bottom: ${width} solid ${color}`);
+  }
+  let textAlign;
+  if (cellTag === "th" && presentation.headerCenter) {
+    textAlign = "center";
+  } else if (isTableCellAlign(colAlign)) {
+    textAlign = colAlign;
+  } else if (colAlign == null || colAlign === "left") {
+    textAlign = presentation.defaultCellAlign;
+  }
+  if (textAlign && textAlign !== "left") {
+    parts.push(`text-align: ${textAlign}`);
+  }
+  if (cellTag === "th" && presentation.headerBold) {
+    parts.push("font-weight: bold");
+  }
+  if (cellTag === "th" && presentation.headerShade) {
+    parts.push(`background-color: ${DEFAULT_HEADER_BG}`);
+  } else if (cellTag === "td" && presentation.zebraRows && bodyRowIndex !== void 0 && isZebraBodyRow(headerRowCount, bodyRowIndex)) {
+    parts.push(`background-color: ${DEFAULT_ZEBRA_BG}`);
+  }
+  return ` style="${parts.join("; ")}"`;
+}
+
 // src/conversion/html/delta-to-html.ts
 function deltaToHtml(delta, options = {}) {
   const lines = splitIntoLines(delta);
@@ -2607,6 +2699,7 @@ function deltaToHtml(delta, options = {}) {
   const hierarchicalNumbers = options.hierarchicalNumbers ?? false;
   const blockHandlers = options.blockHandlers;
   const anchorLinks = options.anchorLinks ?? false;
+  const resolvedDocumentPresentation = resolveDocumentPresentation(options.documentPresentation);
   let html = "";
   let listStack = [];
   let counters = [];
@@ -2669,7 +2762,14 @@ function deltaToHtml(delta, options = {}) {
       if (hierarchicalNumbers && listType === "ordered") {
         hierarchicalNumber = counters.slice(0, indent + 1).join(".");
       }
-      html += renderListItem(content, listItemAttrs, pretty, indentLevel, hierarchicalNumber);
+      html += renderListItem(
+        content,
+        listItemAttrs,
+        pretty,
+        indentLevel,
+        hierarchicalNumber,
+        resolvedDocumentPresentation
+      );
     } else {
       let headingId;
       if (line.attributes?.header) {
@@ -2681,7 +2781,14 @@ function deltaToHtml(delta, options = {}) {
           headingId = slugifyWithDedup(plainText, slugUsageMap);
         }
       }
-      html += renderBlock(content, tag, line.attributes, pretty, headingId);
+      html += renderBlock(
+        content,
+        tag,
+        line.attributes,
+        pretty,
+        headingId,
+        resolvedDocumentPresentation
+      );
     }
   }
   html += closeAllLists(listStack, pretty);
@@ -2782,7 +2889,10 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
   const bodyRows = sortedRows.filter(([, r]) => !r.isHeader);
   const indent = pretty ? "  " : "";
   const nl = pretty ? "\n" : "";
-  let html = `<table>${nl}`;
+  const usePresentation = options?.tablePresentation !== void 0;
+  const presentation = usePresentation ? resolveTablePresentation(options.tablePresentation) : null;
+  const headerRowCount = headerRows.length;
+  let html = usePresentation && presentation ? `${tableOpenTag(presentation)}${nl}` : `<table>${nl}`;
   if (headerRows.length > 0) {
     html += `${indent}<thead>${nl}`;
     for (const [, row] of headerRows) {
@@ -2794,13 +2904,16 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
         pretty,
         2,
         blockHandlers,
-        options
+        options,
+        presentation,
+        headerRowCount
       );
     }
     html += `${indent}</thead>${nl}`;
   }
   if (bodyRows.length > 0) {
     html += `${indent}<tbody>${nl}`;
+    let bodyRowIndex = 0;
     for (const [, row] of bodyRows) {
       html += renderTableRow(
         row.cells,
@@ -2810,8 +2923,12 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
         pretty,
         2,
         blockHandlers,
-        options
+        options,
+        presentation,
+        headerRowCount,
+        bodyRowIndex
       );
+      bodyRowIndex += 1;
     }
     html += `${indent}</tbody>${nl}`;
   }
@@ -2819,7 +2936,7 @@ function renderTable(tableLines, embedRenderers, pretty, blockHandlers, options)
   if (pretty) html += "\n";
   return html;
 }
-function renderTableRow(cells, maxCol, cellTag, embedRenderers, pretty, depth, blockHandlers, options) {
+function renderTableRow(cells, maxCol, cellTag, embedRenderers, pretty, depth, blockHandlers, options, presentation, headerRowCount = 0, bodyRowIndex) {
   const indent = pretty ? "  ".repeat(depth) : "";
   const cellIndent = pretty ? "  ".repeat(depth + 1) : "";
   const nl = pretty ? "\n" : "";
@@ -2827,8 +2944,19 @@ function renderTableRow(cells, maxCol, cellTag, embedRenderers, pretty, depth, b
   for (let col = 0; col <= maxCol; col++) {
     const cell = cells.get(col);
     const content = cell ? renderLineContent(cell.ops, embedRenderers, blockHandlers, options) : "";
-    const alignStyle = cell?.colAlign && cell.colAlign !== "left" ? ` style="text-align: ${cell.colAlign}"` : "";
-    html += `${cellIndent}<${cellTag}${alignStyle}>${content}</${cellTag}>${nl}`;
+    let styleAttr = "";
+    if (presentation) {
+      styleAttr = buildTableCellStyleAttr({
+        presentation,
+        cellTag,
+        colAlign: cell?.colAlign,
+        headerRowCount,
+        bodyRowIndex: cellTag === "td" ? bodyRowIndex : void 0
+      });
+    } else {
+      styleAttr = cell?.colAlign && cell.colAlign !== "left" ? ` style="text-align: ${cell.colAlign}"` : "";
+    }
+    html += `${cellIndent}<${cellTag}${styleAttr}>${content}</${cellTag}>${nl}`;
   }
   html += `${indent}</tr>${nl}`;
   return html;
@@ -2952,36 +3080,41 @@ function getListItemAttributes(attributes) {
   }
   return "";
 }
-function renderListItem(content, attrs, pretty, indentLevel, hierarchicalNumber) {
+function renderListItem(content, attrs, pretty, indentLevel, hierarchicalNumber, resolvedDocumentPresentation) {
   const indent = pretty ? getIndent(indentLevel) : "";
   const innerContent = content || "<br>";
   let fullAttrs = attrs;
   if (hierarchicalNumber) {
     fullAttrs += ` data-number="${hierarchicalNumber}"`;
   }
+  const styleAttr = joinStyleParts(
+    documentPresentationStyleParts("li", resolvedDocumentPresentation)
+  );
+  fullAttrs += styleAttr;
   const html = `${indent}<li${fullAttrs}>${innerContent}</li>`;
   return pretty ? html + "\n" : html;
 }
-function renderBlock(content, tag, attributes, pretty, id) {
+function renderBlock(content, tag, attributes, pretty, id, resolvedDocumentPresentation) {
   const idAttr = id ? ` id="${escapeHtml(id)}"` : "";
-  const styleAttr = getBlockStyleAttribute(attributes);
+  const styleAttr = getBlockStyleAttribute(tag, attributes, resolvedDocumentPresentation);
   const innerContent = content || "<br>";
   const html = `<${tag}${idAttr}${styleAttr}>${innerContent}</${tag}>`;
   return pretty ? html + "\n" : html;
 }
-function getBlockStyleAttribute(attributes) {
-  if (!attributes) return "";
-  const styles = [];
-  const alignVal = attributes.align;
-  if (alignVal && typeof alignVal === "string" && alignVal !== "left") {
-    styles.push(`text-align: ${alignVal}`);
-  }
-  if (attributes.indent && typeof attributes.indent === "number") {
-    if (!attributes.list) {
-      styles.push(`margin-left: ${attributes.indent * 2}em`);
+function getBlockStyleAttribute(tag, attributes, resolvedDocumentPresentation) {
+  const styles = documentPresentationStyleParts(tag, resolvedDocumentPresentation);
+  if (attributes) {
+    const alignVal = attributes.align;
+    if (alignVal && typeof alignVal === "string" && alignVal !== "left") {
+      styles.push(`text-align: ${alignVal}`);
+    }
+    if (attributes.indent && typeof attributes.indent === "number") {
+      if (!attributes.list) {
+        styles.push(`margin-left: ${attributes.indent * 2}em`);
+      }
     }
   }
-  return styles.length > 0 ? ` style="${styles.join("; ")}"` : "";
+  return joinStyleParts(styles);
 }
 function extractPlainText(ops) {
   let text = "";
@@ -5134,6 +5267,7 @@ function extractTableRegion(ops, hintOpIdx) {
   deltaToHtml,
   deltaToMarkdown,
   dividerFormat,
+  documentPresentationStyleParts,
   escapeHtml,
   extractBoxOpAttributes,
   extractTableRegion,
@@ -5155,6 +5289,7 @@ function extractTableRegion(ops, hintOpIdx) {
   isTextNode,
   isValidColor,
   isValidHexColor,
+  isZebraBodyRow,
   italicFormat,
   kbdFormat,
   linkFormat,
@@ -5165,6 +5300,8 @@ function extractTableRegion(ops, hintOpIdx) {
   nodeAdapter,
   normalizeDelta,
   preloadRemark,
+  resolveDocumentPresentation,
+  resolveTablePresentation,
   sanitizeDelta,
   sizeFormat,
   slugify,